<template>
  <view>
    <view class="leo-list">
      <view>
        <view class="uni-flex uni-row leo-align-items-center leo-space-between leo-list-item" v-for="(item, index) in list"
              :key="index" @click="click(item.id,index)">
          <view class="uni-flex uni-row leo-align-items-center">
            <view class="">
              <view class="text-line-height-1 text-16 pingfangbold leo-ellipsis-1 u-type-primary">
                {{ item.title }}
              </view>
              <view class="text-line-height-1 pingfangmedium text-12 leo-ellipsis-1" style="margin-top: 16rpx; color: rgba(156,164,169,1);">
                开始时间：{{ item.beginTime }}
              </view>
            </view>
          </view>
          <view class="">
            <u-icon name="arrow-right" color="#bbb" size="28"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" />
    <u-action-sheet :list="list1" @click="click1" v-model="show"></u-action-sheet>
    <view class="bottom-btn">
      <u-button @click="toPostExerciseTitle" type="primary" :ripple="true" size="medium">填写标题</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show:false,
      list1: [{text: '查看作答情况'},{text: '查看习题'},{text: '发布习题'}],
      list:[],
      currentIndex: '',
      currentId: '',
      courseId: '',
      pageNum: 1,
      total: 0,
      status: '',

    };
  },
  onLoad(e){
    this.courseId = e.courseId;
    this.initial();
    uni.$on("exerciseTitle",this.initial);
  },
  onPullDownRefresh(){
    this.initial();
  },
  onReachBottom() {
    this.pageNum = ++ this.pageNum;
    this.status = 'loading';
    if((this.pageNum - 1) * 5 > this.total) {
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }else {
      this.getList().then(res => {
        this.total = res.data;
        this.list = this.list.concat(res.data);
      });
      this.status = 'loadmore';
    }
  },
  methods: {
    initial(){
      this.pageNum = 1;
      this.total = 0;
      this.getList().then(res => {
        this.total = res.data;
        this.list = res.data;
        uni.stopPullDownRefresh();
      });
    },
    async getList(){
      return await this.$u.api.getExerciseTitle(this.pageNum,this.courseId);
    },
    click(id,index){
      this.show = true;
      this.currentId = id;
      this.currentIndex = index;
    },
    click1(index){
      let flag = new Date(this.list[this.currentIndex].beginTime).getTime() <= new Date().getTime();
      if (index === 0){
        this.toAnsweringSituation();
      }else if (index === 1){
        if (flag){
          this.$u.toast("答题已开始，不能修改习题")
          return ;
        }
        this.toExerciseDetail();
      }else {
        if (flag){
          this.$u.toast("答题已开始，不能发布习题")
          return ;
        }
        this.toPostExercise();
      }
    },
    toExerciseDetail(){
      this.$u.route({
        url: 'pages/exercise_detail/exercise_detail',
        params: {
          id: this.currentId
        }
      })
    },
    toAnsweringSituation(){
      this.$u.route({
        url: 'pages/answering_situation/answering_situation',
        params: {
          id: this.currentId
        }
      })
    },
    toPostExercise(){
      this.$u.route({
        url: 'pages/post_exercise/post_exercise',
        params: {
          id: this.currentId
        }
      })
    },
    toPostExerciseTitle(){
      this.$u.route({
        url: 'pages/post_exercise_title/post_exercise_title',
        params: {
          courseId: this.courseId
        }
      })
    }
  }
}
</script>

<style lang="scss">
.bottom-btn{
  font-size: 30rpx;
  font-weight: bolder;
  bottom: 0;
  right: 50%;
  left: 32%;
  position: fixed;
  margin-bottom: 20rpx;
}

.leo-list {
  margin: 15rpx 20rpx;
  background: #ffffff;
  .leo-list-item {
    padding: 36rpx 0rpx;
    border-top: #7092d4 2rpx solid;

    &:first-child {
      border-top: #7092d4 2rpx solid;
    }
    &:last-child {
      border-bottom: #7092d4 2rpx solid;
    }
    .icon {
      display: block;
      width: 64rpx;
      height: 64rpx;
    }
  }
}
.uni-flex {
  display: flex;
  flex-direction: row;
}

.uni-flex-item {
  flex: 1;
}

.uni-row {
  flex-direction: row;
}

.uni-column {
  flex-direction: column;
}

.leo-align-items-center {
  align-items: center;
}

.leo-space-between {
  justify-content: space-between;
}

.text-line-height-1 {
  line-height: 1 !important;
}

.text-12 {
  font-size: 25rpx !important;
}
.text-16{
  font-size: 30rpx;
}
.leo-ellipsis-1 {
  display: -webkit-box;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
